<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 一、引入element-plus样式 -->
    <link rel="stylesheet" href="./static/element-plus/index.css" /><!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/theme-chalk/display.css" /><!-- 引入后,class="hidden-xs-only"才能执行 -->
    <script src="./static/js/vue.global.js"></script>               <!-- Import Vue 3 -->
    <script src="./static/element-plus/index.full.js"></script>     <!-- Import component library -->
    <style>
        a{text-decoration: none;}
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <!-- 1、:span="4" 该元素占4列(一行有24列) 2、flex-direction: row;设置子元素沿水平方向排列 3、align-items: center;定义弹性容器内子元素在交叉轴（与主轴垂直的轴）上的对齐方式。 -->
                    <el-col :span="4" :xs="12" style="display: flex;flex-direction: row;align-items: center;">
                        <img src="./static/images/logo.png" style="height:60px;padding-right: 8px;"/>
                        <h2>技术社区</h2>
                    </el-col>
                    <el-col :span="8" :xs="12">
                        <!-- 1、default-active 设置默认选中哪一项  2、:ellipsis="false" 设置菜单项在屏幕缩小时不省略显示 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" style="border-bottom: none !important;"> 
                            <el-menu-item index="1"><a href="3_index.html">首页</a></el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4"><a href="7_mall.html">商场</a></el-menu-item>
                        </el-menu>
                    </el-col>
                    <!-- 1、:span="8" 该元素占8列  2、class="hidden-xs-only"当屏幕宽度小于768px时,隐藏该元素 -->
                    <el-col :span="8" class="hidden-xs-only" style="height: 60px;line-height: 60px;">
                        <el-input placeholder="请输入关键字"/>
                    </el-col>
                    <el-col :span="4" class="hidden-xs-only" style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end">
                        <img src="./static/images/avatar.png" style="border-radius:50% ;width: 50px;padding-right: 8px;"/>
                        <span>admin</span>
                    </el-col>
                </el-row>
            </el-header>

            <el-container style="width:80%;margin:20px auto;">
                <el-aside  style="width:20%;margin-top: 20px;">
                    <el-card>
                        <el-menu :default-active="activeIndex" :ellipsis="false" style="border-bottom: none !important;"> 
                            <el-menu-item index="1">个人主页</el-menu-item>
                            <el-menu-item index="2">个人资料</el-menu-item>
                            <el-menu-item index="3">账号设置</el-menu-item>
                            <el-menu-item index="4">消息设置</el-menu-item>
                            <el-menu-item index="5" v-show="user.userType=='admin'">后台管理</el-menu-item>
                        </el-menu>
                    </el-card>
                </el-aside>
                <el-main>
                    <el-card>
                        <el-row>
                            <el-col :span="6">
                                <img src="./static/images/avatar.png" style="width: 100px;border-radius: 50%;"/>
                            </el-col>
                            <el-col :span="18">
                                <h2>{{user.name}}</h2>
                                <div>性别：{{user.gender}} | 岗位：{{user.job}}</div>
                                <div>签名档：{{user.sign}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card style="margin-top: 10px;">
                        <el-tabs>
                            <el-tab-pane label="我发布的文章">
                                <div v-if="myArticleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的文章">
                                <div v-if="articleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的课程">
                                <div v-if="courseList.length>0">
                                    <p v-for="item in courseList">
                                        <span>名称：{{item.name}}——产地：{{item.city}}——价格：{{item.price}}</span>
                                    </p>
                                </div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的商品">
                                <div v-if="productList.length>0">
                                    <ul>
                                        <li v-for="(product,index) in productList" :key="product.id">
                                            <h3>{{index+1}}-{{product.type}}</h3>
                                            <p>名称：{{product.name}}</p>
                                            <p>价格：￥{{product.price}}</p>
                                            <p><img :src="product.img" style="width: 100px;"/></p>
                                        </li>
                                    </ul>
                                </div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-main>
            </el-container>

            <el-footer>
                <el-row>
                    <!-- :lg="8" :xs="24" 表示在大屏幕上占8格，在小屏幕(宽度<768px)上占24格" -->
                    <el-col :lg="8" :xs="24" style="display: flex;flex-direction: row;align-items: center;">
                        <div><img src="./static/images/logo.png" style="width: 100px;"/></div>
                        <div style="padding-left: 8px;">
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <!-- 1、flex-direction: column; 设置子元素为垂直排列  2、align-items: center; 设置子元素水平居中  3、justify-content: center; 设置子元素垂直居中 -->
                    <el-col :lg="8" :xs="24" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                        <div  style="display: flex; justify-content: space-between; width: 65%; margin-bottom: 16px;">
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">文章</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div  style="display: flex; justify-content: space-between; width: 70%;">
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :lg="8" :xs="24">
                        <div style="float: right;">
                            <h2>联系我们</h2>
                            <p>电话：010-12345678</p>
                            <p>邮箱：12345678@qq.com</p>
                        </div>
                    </el-col>
                </el-row>
                <div  style="background-color: #a0cfff;text-align: center;height: 60px;line-height: 60px;">软件开发工作室版权所有</div>
            </el-footer>
        </el-container>
    </div>    
</body>

    <script>
        var App={
            data(){
                return{
                    activeIndex:'1',
                    user:{
                        name:"admin",
                        gender:"男",
                        job:"前端开发工程师",
                        sign:"代码千万行，注释第一行",
                        userType:"admin",
                    },
                    myArticleList:[],
                    articleList:[],
                    courseList:[
                        {name:'语文',city:'北京',price:'600元'},
                        {name:'数学',city:'上海',price:'900元'},
                        {name:'英语',city:'广州',price:'800元'}
                    ],
                    productList:[
                        { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29,  img: './static/images/product01.png' },
                        { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, img: './static/images/product02.png' },
                        { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, img: './static/images/product03.png' },
                        { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, img: './static/images/product04.png' },
                        { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29,img: './static/images/product05.png' },
                        { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, img: './static/images/product06.png' },
                    ],
                    
                };
            },
        };

        Vue.createApp(App).use(ElementPlus).mount("#app");

    </script>

</html>

